<div>
    <div class="tab-head">
        <div>
            <label>{{'transaction.id'|translate}}</label>
            <input nz-input style="width: 180px;" [(ngModel)]="page.varId" placeholder="{{'transaction.id'|translate}}{{'placeholder.search'|translate}}" />
        </div>
        <div>
            <label>{{'transaction.loginId'|translate}}</label>
            <input nz-input style="width: 120px;" [(ngModel)]="page.loginId" placeholder="{{'transaction.loginId'|translate}}{{'placeholder.search'|translate}}" />

        </div>
        <div>
            <label>{{'transaction.createTime'|translate}}</label>
            <nz-range-picker nzFormat='yyyy-MM-dd' style="width: 240px;" [(ngModel)]="dateRange" (ngModelChange)="onChangeDate($event)">
            </nz-range-picker>
        </div>
        <div>
            <button nz-button class="noradius" nzType="primary" (click)="sherch()">{{'placeholder.search'|translate}}</button>
        </div>
    </div>
    <div class="tab-title">
        {{'transaction.listTitle'|translate}}
    </div>
    <nz-table class="medical-table" #columnTable [nzSize]='small' [nzTotal]="page.pages"  [nzPageIndex]="page.pageNo"
         nzPageSize="10"  (nzPageIndexChange)="changeCurrentPage($event)" [nzFrontPagination]="false"
        [nzLoading]="tableLoading" [nzData]="dataList">
        <thead>
            <tr>
                <th>{{'transaction.id'|translate}}</th>
                <th>{{'transaction.createTime'|translate}}</th>
                <th>{{'transaction.loginId'|translate}}</th>
                <th>{{'transaction.amount'|translate}}</th>
                <th>{{'transaction.balance'|translate}}</th>
                <th>{{'transaction.type'|translate}}</th>
                <th>{{'transaction.status'|translate}}</th>
                <th>{{'cz.title'|translate}}</th>
            </tr>
        </thead>
        <tbody>
            <tr *ngFor="let data of columnTable.data">
                <td>{{ data.varId }}</td>
                <td>{{ data.createTime }}</td>
                <td>{{ data.loginId }}</td>
                <td>{{ data.amount}}</td>
                <td>{{ data.balance}}</td>
                <td>{{ data.type | getTansactionStatus:tansactionStatus }}</td>
                <td>{{ data.status | getTansactionStatus:tansactionStatus }}</td>
                <td class='my-cz'>
                    <a (click)='onChangeStatus(data,true)'>{{'cz.detail'|translate}}</a>
                    <!-- <a *ngIf="data.status === 'PENDING'" (click)='reject(data)'>{{'cz.reject'|translate}}</a>
                    <a *ngIf="data.status === 'PENDING'" (click)='approve(data)'>{{'cz.approve'|translate}}</a> -->
                </td>
            </tr>
        </tbody>
    </nz-table>

    <nz-modal nzWidth='900' [(nzVisible)]="isVisible" [nzMaskClosable]="true" (nzOnCancel)="handleCancel()" [nzFooter]="modalFooter" nzTitle="详情">

        <div class="gutter-example">
            <div class="xq-item" nz-row [nzGutter]="{ xs: 8, sm: 16, md: 24, lg: 32, xl: 32, xxl: 32 }">
                <div nz-col class="gutter-row " nzSpan="8">
                    <span>{{'transaction.id'|translate}}:</span> {{del?.id}}
                </div>
                <div nz-col class="gutter-row" nzSpan="8">
                    <span>{{'transaction.createTime'|translate}}:</span> {{del?.createTime}}
                </div>
            </div>

            <div class="xq-item" nz-row [nzGutter]="{ xs: 8, sm: 16, md: 24, lg: 32, xl: 32, xxl: 32 }">
                <div nz-col class="gutter-row" nzSpan="8">
                    <span>{{'transaction.loginId'|translate}}:</span> {{del?.loginId }}
                </div>
                <div nz-col class="gutter-row" nzSpan="8">
                    <span>{{'transaction.varId'|translate}}:</span> {{del?.varId}}
                </div>
            </div>

            <div class="xq-item" nz-row [nzGutter]="{ xs: 8, sm: 16, md: 24, lg: 32, xl: 32, xxl: 32 }">
                <div nz-col class="gutter-row" nzSpan="8">
                    <span>{{'transaction.amount'|translate}}(¥):</span> {{del?.amount}}
                </div>
                <div nz-col class="gutter-row" nzSpan="8">
                    <span>{{'transaction.before'|translate}}(¥):</span> {{del?.balance}}
                </div>
                <div nz-col class="gutter-row" nzSpan="8">
                    <span>{{'transaction.after'|translate}}(¥):</span> {{del?.balance - del?.amount}}
                </div>
            </div>

            <div class="xq-item" nz-row [nzGutter]="{ xs: 8, sm: 16, md: 24, lg: 32, xl: 32, xxl: 32 }">
                <div nz-col class="gutter-row" nzSpan="8">
                    <span>{{'transaction.type'|translate}}:</span> {{del?.type | getTansactionStatus:tansactionStatus}}
                </div>
                <div nz-col class="gutter-row" nzSpan="8">
                    <span>{{'transaction.status'|translate}}:</span> {{del?.status | getTansactionStatus:tansactionStatus}}
                </div>
            </div>

        </div>

        <ng-template #modalFooter>
            <button nz-button nzType="default" (click)="handleCancel()">{{'cz.close'|translate}}</button>
        </ng-template>
    </nz-modal>

    <nz-modal [(nzVisible)]="isQX" [nzMaskClosable]="false" [nzTitle]="modalTitle" (nzOnCancel)="handleCancel()"
        (nzOnOk)="handleOk()">
        <form nz-form class="org-register-one" [formGroup]="validateForm">
            <h3>{{'transaction.rejectMemo'|translate}}</h3>
            <nz-form-item>
                <nz-form-control [nzValidateStatus]="validateForm.get('rejectMemo')">
                    <textarea nz-input id="rejectMemo" formControlName="rejectMemo"
                        placeholder="{{'transaction.rejectMemoP'|translate}}"></textarea>
                </nz-form-control>
            </nz-form-item>
        </form>
    </nz-modal>
</div>